<template>
	<uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0">
		<view class="edit_box">
			<uni-forms ref="formRef" :label-width="120" label-align="right" :model="formData" :rules="rules">
				<uni-forms-item required label="字段类型" name="type">
					<cl-select-picker :options="fieldTemplateList" labelFiled="typeName" valueFiled="type" v-model="formData.type"
						:clearable="false" :disabled="disabled" @submit="handleTypeSubmit"></cl-select-picker>
				</uni-forms-item>
				<uni-forms-item required label="字段名称" name="name">
					<uni-easyinput v-model="formData.name" placeholder="请输入" :cursorSpacing="20" :disabled="disabled"
						:maxlength="20">
						<template #right>
							<view class="length_tip">{{formData.name?.length || 0}} / 20</view>
						</template>
					</uni-easyinput>
				</uni-forms-item>
				<TextField v-if="formData.type === 'text'" v-model="formData"></TextField>
				<TextareaField v-else-if="formData.type === 'textarea'" v-model="formData"></TextareaField>
				<DigitField v-else-if="formData.type === 'digit'" v-model="formData"></DigitField>
				<SelectField v-else-if="formData.type === 'select'" v-model="formData"></SelectField>
				<DateField v-else-if="formData.type === 'date'" v-model="formData"></DateField>
				<ImageField v-else-if="formData.type === 'upImage'" v-model="formData"></ImageField>
				<uni-forms-item name="required" label="是否必填">
					<uni-data-checkbox style="position: relative; top: 8rpx" v-model="formData.required" :disabled="disabled"
						:localdata="requireOptions" />
				</uni-forms-item>
			</uni-forms>
			<view class="cl_bottom_box">
				<view class="cl_bottom_box_btn" @click="handleSubmit">保存</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		fieldTemplateList
	} from '@/config/field.js'
	import {
		isRegExp,
		cloneDeep
	} from '@/utils/index.js'
	import TextField from './TextField.vue'
	import TextareaField from './TextareaField.vue'
	import DigitField from './DigitField.vue'
	import SelectField from './SelectField.vue'
	import DateField from './DateField.vue'
	import ImageField from './ImageField.vue'

	const emits = defineEmits(['saveField'])
	const props = defineProps({
		disabled: Boolean
	})
	const popupRef = ref()
	const formRef = ref()
	const requireOptions = [{
			text: '是',
			value: '1'
		},
		{
			text: '否',
			value: '0'
		},
	]
	// 默认选择字段模板的第一个
	const formData = ref(fieldTemplateList[0])
	const rules = {
		name: {
			rules: [{
				required: true,
				errorMessage: '请输入字段名称'
			}],
		},
		regExp: {
			rules: [{
				required: true,
				errorMessage: '请选择正则表达式'
			}],
		},
		// 自定义正则校验
		costomRegExp: {
			rules: [{
				required: true,
				errorMessage: '请输入正则表达式'
			}, {
				validateFunction: function(rule, value, data, callback) {
					if (formData.value.isRegExp === '2') {
						if (isRegExp(value)) {
							return true
						} else {
							callback('请输入正确的正则表达式')
						}
					}
					return true
				}
			}]
		}
	}
	const handleTypeSubmit = (type, item) => {
		if (type) {
			formData.value = item
		} else {
			formData.value = {}
		}
	}

	const handleSubmit = async () => {
		await formRef.value.validate()
		uni.showLoading({
			mask: true,
			title: '字段保存中'
		})
		emits('saveField', cloneDeep(formData.value))
		popupRef.value.close()
	}
	// 设置字段数据
	const setFeild = (type, fieldData) => {
		// 新增则自动设置为第一个字段类型的数据
		if (type === 'add') {
			formData.value = cloneDeep(fieldTemplateList[0])
			// 编辑和详情使用点击的字段展示
		} else if (['edit', 'detail'].includes(type)) {
			formData.value = fieldData
		}
		popupRef.value.open()
	}

	// 弹窗打开
	const open = () => {
		popupRef.value.open()
	}
	// 弹窗关闭
	const close = () => {
		popupRef.value.close()
	}
	defineExpose({
		open,
		close,
		setFeild
	})
</script>

<style scoped lang="scss">
	.edit_box {
		padding: 40rpx 20rpx 10rpx 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		width: 100vw;
		overflow: hidden;
		background-color: #fff;
	}
</style>